<!-- listings/templates/listings/home.html -->
{% extends "base.html" %}

{% block title %}{{ page_title }} - 首页{% endblock %}

{% block content %}
<div class="px-4 py-5 my-5 text-center">
    <h1 class="display-5 fw-bold">欢迎来到{{ page_title }}！</h1>
    <div class="col-lg-6 mx-auto">
        <p class="lead mb-4">在这里，你可以分享你的技能，寻求帮助，与校友互助成长。今日平台访问次数：{{ num_visits }}</p>
        {% if not user.is_authenticated %}
        <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
            <a href="{% url 'listings:register' %}" class="btn btn-primary btn-lg px-4 gap-3">立即注册</a>
            <a href="{% url 'login' %}" class="btn btn-outline-secondary btn-lg px-4">登录</a>
        </div>
        {% endif %}
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <h2>最新技能分享 <a href="#" class="btn btn-sm btn-outline-primary float-end">更多»</a></h2>
        {% if latest_skills %}
            <ul class="list-group">
                {% for skill in latest_skills %}
                <li class="list-group-item">
                    <a href="#">{{ skill.title }}</a> (由 {{ skill.provider.username }}) - <span class="badge bg-secondary">{{ skill.get_reward_type_display }}</span>
                    <small class="text-muted float-end">{{ skill.created_at|date:"Y-m-d" }}</small>
                </li>
                {% endfor %}
            </ul>
        {% else %}
            <p>暂时还没有人分享技能哦，快来成为第一个吧！</p>
        {% endif %}
    </div>
    <div class="col-md-6">
        <h2>最新互助需求 <a href="#" class="btn btn-sm btn-outline-primary float-end">更多»</a></h2>
        {% if latest_needs %}
            <ul class="list-group">
                {% for need in latest_needs %}
                <li class="list-group-item">
                    <a href="#">{{ need.title }}</a> (由 {{ need.requester.username }}) - <span class="badge bg-info">{{ need.get_preferred_solution_display }}</span>
                    <small class="text-muted float-end">{{ need.created_at|date:"Y-m-d" }}</small>
                </li>
                {% endfor %}
            </ul>
        {% else %}
            <p>当前没有待解决的需求。</p>
        {% endif %}
    </div>
</div>
{% endblock %}